<template>
    <div>
        <div v-if="orderInfo" class="order-info">
            <span>订单时间：{{orderInfo.uoOrdertime}}</span>
            <span>订单号：{{out_id}}</span>
            <span>交易号：{{trade_no}}</span>
        </div>
        <tr>
            <th class="region">省市</th>
            <th class="address">详细地址</th>
            <th class="receiver">收件人</th>
            <th class="phone">联系方式</th>
        </tr>
        <tr v-if="orderInfo">
            <td class="region">
                {{orderInfo.user.uUsername}}
            </td>
            <td class="address">
                {{orderInfo.user.uPhone}}
            </td>
            <td class="receiver">
                {{orderInfo.user.uPhone}}
            </td>
            <td class="phone">
                {{orderInfo.user.uPhone}}
            </td>
        </tr>
    </div>
</template>
<style scoped>
    div{
        background-color: rgb(245,245,245);
        width: 71.2vw;
    }
    span{
        padding: 10px 0;
        display: inline-block;
        margin-right: 5vw;;
    }
    span:first-child{
        margin-left: 40px;
    }
    /deep/.el-tabs__header{
        width: 71.5vw;
    }
    /deep/.el-tabs__nav>div{
        font-size: 16px;
        font-weight: 800;
    }
    .el-tabs{
        margin-left: 13.5vw;
    }
    td{
        text-align:center;
        width: 20vw;
        border: 1px solid silver;
        padding: 10px 0;
    }
    th{
        background-color: #272727;
        border-bottom: none;
        color: #dfdfdf;
        text-align: center;
        padding: 10px 0;
    }
    .order-info{
        background: #272727;
        color: #dfdfdf;
        border-bottom: 2px solid silver;
    }
</style>
<script>
    export default {
        props:['orderInfo','out_id','trade_no'],
        data() {
            return {
                order_time: '2020-02-29',
                out_trade_no: '12359478',
                region:'四川省成都市',
                address:'西部国际金融中心',
                receiver:'XXX',
                phone:'123 1234 123',
            };
        },
        beforeUpdate(){
        }
    }
</script>